<template>
    <el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal=this.$store.state.theme.interface.other.closeOnClickModal>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <div class="block">
                    <el-radio v-model="form.status" label="1">开启</el-radio>
                    <el-radio v-model="form.status" label="2">关闭</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="角色描述" prop="mark">
                <el-input type="textarea" v-model="form.mark" placeholder="请输入角色功能描述"></el-input>
            </el-form-item>
            <el-form-item label="菜单权限" prop="menu_ids">
                <el-button type="primary" size="mini" @click="clickExpand">{{ !isDefaultExpanded ? '展开' : '关闭'
                }}</el-button>
                <el-button type="primary" size="mini" @click="clickSelect">{{ !isSetCheckedKeys ? '全选' : '清空' }}</el-button>
                <el-tree :data="menuData" ref="tree" show-checkbox node-key="id" :props="defaultProps"
                    @check-change="handleCheckChange" :default-expand-all="isDefaultExpanded">
                </el-tree>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import { add } from '@/api/system/auth/role';
import { getMenuTree } from '@/api/system/auth/menu';
import { getIds } from "@/utils/tool";
export default {
    name: "add",
    data() {
        return {
            form: {
                name: '',
                status: '1',
                mark: '',
                menu_ids: ''
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur'
                    }
                ],
                mark: [
                    {
                        required: true,
                        message: '请输入角色功能描述',
                        trigger: 'blur',
                    }
                ],
                menu_ids: [
                    {
                        required: true,
                        message: '至少选择一个菜单',
                    }
                ]
            },
            dialogFormVisible: false,
            menuData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            isDefaultExpanded: false,
            treeKey: '',
            setCheckedKeys: [],
            isSetCheckedKeys: false
        }
    },
    mounted() {
        getMenuTree().then(res => {
            this.menuData = res.data
        })
    },
    methods: {
        add() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    add(this.form).then(res => {
                        this.dialogFormVisible = !this.dialogFormVisible;
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.$emit('updateList');
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleCheckChange() {
            this.form.menu_ids = this.$refs.tree.getCheckedKeys().join(',');
        },
        clickExpand() {
            this.isDefaultExpanded = !this.isDefaultExpanded;
            for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
                this.$refs.tree.store._getAllNodes()[i].expanded = this.isDefaultExpanded;
            }
            console.log(this.$refs.tree)

        },
        clickSelect() {
            this.isSetCheckedKeys = !this.isSetCheckedKeys;
            this.$refs.tree.setCheckedKeys(this.isSetCheckedKeys ? getIds(this.menuData) : []);
        }
    },
    watch: {
        'dialogFormVisible': {
            handler: function () {
                this.$nextTick(() => {
                    this.$refs['form'].resetFields();
                    this.$refs.tree.setCheckedKeys([]);
                    this.form.menu_ids = '';
                });
            }
        }
    },
}
</script>
  
<style lang="less" scoped>
.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #DCDFE6;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), -2px -2px 2px rgba(255, 255, 255, 1);
    overflow: hidden;
}
</style>